<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <my-first-com></my-first-com>
    </div>
  </body>
</html>

<!-- 组件的模板 -->
<template id="tem">
  <!-- 结构只能有一个根节点 -->
  <fieldset>
    <legend>第一个组件</legend>
    <h1>第一次好紧张哦</h1>
    <h1>{{msg}}</h1>
    <sec-com></sec-com>
    <three-com></three-com>
  </fieldset>
</template>
<!-- 第二个组件的模板 -->
<template id="sec">
  <fieldset>
    <legend>第二个组件</legend>
    <h1>{{msg}}</h1>
  </fieldset>
</template>
<!-- 第三个组件的模板 -->
<template id="three">
  <fieldset>
    <legend>第三个组件</legend>
    <h1>{{msg}}</h1>
  </fieldset>
</template>

<script src="http://chst.vip:8081/vue.js"></script>

<script>
  // 组件创建的步骤
  // 1. 注册组件
  // 2.定义组件结构
  // 3.展示组件

  // 全局注册
  //   组件的data为什么是一个函数？因为每个组件需要维护一份独立的data的数据拷贝，防止数据污染
  Vue.component("my-first-com", {
    //这个选项和vue实例中的选项是差不多的
    data() {
      return {
        msg: "one",
      };
    },
    template: "#tem", //传入组件的结构
    // 局部注册
    components: {
      "sec-com": {
        data() {
          return {
            msg: "第二个组件",
          };
        },
        template: "#sec",
      },
      "three-com": {
        data() {
          return {
            msg: "第三个组件",
          };
        },
        template: "#three",
      },
    },
  });
  const vm = new Vue({
    el: "#app",
    data: {
      msg: "根实例",
    },
  });
</script>
